import { store } from "@/store";
import { Table, Card, Segmented } from "antd";
import { useEffect, useState } from "react";
import { JsonView, allExpanded, defaultStyles } from "react-json-view-lite";
import "react-json-view-lite/dist/index.css";
export default function Info() {
  const [bodyQ, setBodyQ] = useState("");
  const method: string = store.apiObj?.methods;
  const apiObj: any = store.apiObj;
  const bodyEnum: any = {
    get: "query",
    post: "body",
    all: "query | body",
  };
  useEffect(() => {
    const apiObj: any = store.apiObj;
    apiObj?.validFormatDes ? setBodyQ("描述") : setBodyQ("枚举");
  }, [store.apiObj]);
  const setValidObj = () => {
    setTimeout(() => {
      const tDom = document.querySelectorAll("._valid_object_type");
      if (tDom) {
        tDom.forEach((item) => {
          const Enums: any = {
            '"String"': "String",
            '"Number"': "Number",
            '"Boolean"': "Boolean",
          };
          item.innerHTML = Enums[item.innerHTML] || item.innerHTML;
        });
      }
    });
    setTimeout(() => {
      const tDom = document.querySelectorAll("._valid_object_type");
      if (tDom) {
        tDom.forEach((item) => {
          const Enums: any = {
            '"String"': "String",
            '"Number"': "Number",
            '"Boolean"': "Boolean",
          };
          item.innerHTML = Enums[item.innerHTML] || item.innerHTML;
        });
      }
    }, 100);
  };
  useEffect(() => {
    setValidObj();
  }, [store.apiObj, bodyQ]);

  return (
    <div>
      <Table
        key={"body1"}
        size="small"
        title={() => (
          <p className="font-16px font-600">请求头参数（headers）</p>
        )}
        bordered
        columns={[
          {
            title: "字段名",
            dataIndex: "name",
            width: 150,
            align: "center",
          },
          {
            dataIndex: "type",
            title: "类型",
            width: 150,
            align: "center",
          },
          {
            dataIndex: "optional",
            title: "是否可空",
            width: 150,
            align: "center",
            render: (v) => v?.toString() || "false",
          },
          {
            dataIndex: "des",
            title: "描述",
          },
        ]}
        rowKey={"name"}
        pagination={false}
        dataSource={apiObj.header || []}
      ></Table>
      <Table
        key={"body3"}
        title={() => (
          <p className="font-16px font-600">请求参数（{bodyEnum[method]}）</p>
        )}
        bordered
        className="mt-1"
        rowKey={"id"}
        columns={[
          {
            title: (
              <div className="rel">
                <span>参数</span>
                <div
                  className="abs top-0 right-0 translatey--8 box-shadow"
                  style={{ border: "1px solid #fff", borderRadius: 4 }}
                >
                  <Segmented<string>
                    options={["枚举", "描述"]}
                    value={bodyQ}
                    onChange={(value) => {
                      setBodyQ(value);
                    }}
                  />
                </div>
              </div>
            ),
            dataIndex: "p",
            width: "50%",
            align: "center",
            render: () => {
              return (
                <div className="text-left" style={{ height: 400 }}>
                  {bodyQ == "枚举" && (
                    <div
                      id="info_body_p"
                      onClick={() => {
                        setValidObj();
                      }}
                    >
                      <JsonView
                        data={apiObj.validFormat || null}
                        shouldExpandNode={allExpanded}
                        style={{
                          ...defaultStyles,
                          ...{
                            stringValue: "_valid_object_type",
                            collapseIcon: "_valid_object_icon",
                            container: "_valid_object_container",
                          },
                        }}
                      />
                    </div>
                  )}
                  {bodyQ == "描述" && (
                    <div>
                      <Table
                        key={"body2"}
                        scroll={{ y: 340 }}
                        rowKey={"name"}
                        pagination={false}
                        size="small"
                        columns={[
                          {
                            title: "字段名",
                            dataIndex: "name",
                            width: 200,
                            align: "center",
                          },
                          {
                            dataIndex: "type",
                            title: "类型",
                            width: "50%",
                            align: "left",

                            render: (e) => {
                              if (e instanceof Object) {
                                return (
                                  <div>
                                    <JsonView
                                      data={e || null}
                                      shouldExpandNode={allExpanded}
                                      style={{
                                        ...defaultStyles,
                                        ...{
                                          stringValue: "_valid_object_type",
                                          collapseIcon: "_valid_object_icon",
                                          container:
                                            "_valid_object_container_h",
                                        },
                                      }}
                                    />
                                  </div>
                                );
                              } else {
                                return e;
                              }
                            },
                          },
                          {
                            dataIndex: "optional",
                            title: "是否可空",
                            width: 100,
                            align: "center",
                            render: (v) => v?.toString() || "false",
                          },
                          {
                            dataIndex: "des",
                            title: "描述",
                            width: "50%",
                          },
                        ]}
                        dataSource={apiObj.validFormatDes}
                      ></Table>
                    </div>
                  )}
                </div>
              );
            },
          },
          {
            dataIndex: "e",
            title: "示例",
            width: "50%",
            align: "left",
            render: () => {
              return (
                <div className="translatey--4">
                  <JsonView
                    data={apiObj.example || null}
                    shouldExpandNode={allExpanded}
                    style={{
                      ...defaultStyles,
                      ...{
                        stringValue: "_valid_object_type",
                        collapseIcon: "_valid_object_icon",
                        container: "_valid_object_container",
                      },
                    }}
                  />
                </div>
              );
            },
          },
        ]}
        dataSource={[
          {
            id: "1",
            p: "2",
          },
        ]}
        pagination={false}
      ></Table>
      <Card title="响应示例" className="mt-1">
        <JsonView
          data={apiObj.resExample || null}
          shouldExpandNode={allExpanded}
          style={{
            ...defaultStyles,
            ...{
              stringValue: "_valid_object_type",
              collapseIcon: "_valid_object_icon",
              container: "_valid_object_container_h",
            },
          }}
        />
      </Card>
    </div>
  );
}
